{% extends "./template.html" %}

{% block body %}
<div>
   <div class="mb-3">
      <a href="/?user_id={{user_id}}" class="btn btn-sm btn-outline-info">回首页</a>
      <a href="/post?user_id={{user_id}}" class="btn btn-sm btn-primary">发布文章</a>
   </div>
   <div class="text-center">
      <h4 id="title"></h4>
      <div id="create"></div>
   </div>
   <div id="markdown-view"></div>
</div>
{% endblock %}

{% block script %}
<script src="/editor.md/editormd.min.js"></script>
<script src="/editor.md/lib/marked.min.js"></script>
<script src="/editor.md/lib/prettify.min.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/marked/13.0.2/marked.min.js"></script> -->
<script type="module">

   window.onload = () => {
      const params = new URLSearchParams(window.location.search);
      let id = params.get('id')
      $.ajax({
         method: "GET",
         url: `/api/article?id=${id}`,
         success: res => {
            document.querySelector('#title').innerHTML = res.data.title;
            document.querySelector('#create').innerHTML = res.data.createtime;
            var testView = editormd.markdownToHTML("markdown-view", {
               markdown: res.data.content, // Also, you can dynamic set Markdown text
               htmlDecode: false,  // Enable / disable HTML tag encode.
               htmlDecode: "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
               theme: "dark",
               previewTheme: "dark",
            });
            // document.querySelector('#markdown-view').innerHTML = marked.parse(res.data.content)
         }
      })
      // hljs.highlightAll()
   }
</script>
{% endblock %}